<template>
  <div class="footbar">
    <mt-tabbar v-model="selected">
      <mt-tab-item id="tab1" @click.native="tab('/index')">
       <img slot="icon" src="../assets/home-fill.png" v-if="url=='/index'">
        <img slot="icon" src="../assets/home.png" v-else/>
       
       <span v-if="url=='/index'" style="color:red"> 首页</span>
       <span v-else>首页</span>
      </mt-tab-item>
      <mt-tab-item id="tab2" @click.native="tab('/curriculum')">
       <img slot="icon" src="../assets/book-fill.png" v-if="url=='/curriculum'" />
       <img slot="icon" src="../assets/book.png" v-else />
        <span>课程中心</span>
      </mt-tab-item>
      <mt-tab-item id="tab3" @click.native="tab('/bookshop')">
      <img slot="icon" src="../assets/crown-fill.png" v-if="url=='/curriculum'" />
        <img slot="icon" src="../assets/crown.png" v-else />
        书店
      </mt-tab-item>
      <mt-tab-item id="tab4" @click.native="tab('/my')">
      <img slot="icon" src="../assets/user-fill@2x.png" v-if="url=='/curriculum'" />
        <img slot="icon" src="../assets/user@2x.png" v-else/>
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "footbar",
  data (){
      return {
          selected:this.$router.push,
          url:'/index'
      }
  },
  methods:{
    tab (url){
       this.$router.push(url)
    }
  }
};
</script>

<style lang="less" scoped>
.mint-tabbar > .mint-tab-item.is-selected {
    background-color: #eaeaea;
    color: red;
}
</style>